<template>
<div class="header-container">
    <div class="header" >   
            <div class="icon-back" v-on:click="back"></div>        
            <div class="title">登记角色</div>
            <div class="icon-more" @click="appear"></div>            
    </div>   
    <div class="more" v-show="show">
        <ul>
           <router-link to="/msg"><li> <i class="msg"></i><span>消息</span></li></router-link>
            <router-link to="/home"><li class="bottom"> <i class="home "></i><span>首页</span></li></router-link>
        </ul>
    </div>
    <div class="role-container">
    <div class="role-offshelf"  v-for="item in csList" :key="item.price">
         <div class="specific_detail">
                    <img :src="imgUrl[item.type]" alt="" >
                    <div class="info">
                        <div class="row first">
                            <span class="hj" v-if="item.is_counteroffer==1"></span>
                            <span class="name">{{item.united}}</span>
                            <span class="level">{{item.level}}级</span>
                            <span class="service">{{item.area1}}-{{item.area2}}</span>
                            <span class="platform"> 
                                <i class="apple" v-if="item.source==2"></i>
                                <i class="android" v-if="item.source==1"></i>
                            </span>
                        </div>
                        <div class="row">
                            <span class="all_point">总评分:{{item.score_total}}</span>
                            <span class="role_point">人物评分:{{item.score_role}}</span>
                            <span class="price">￥{{item.price}}</span>
                        </div>
                        <div class="row">
                            <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                {{signitem}}
                                </span>
                            <span class="sc">{{item.star}}人收藏</span>
                        </div>
                    </div>
        </div>
    </div>
    </div>
</div>
</template>
<script>
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
export default {
    name:'RegisterHeader',
    data(){
        return{
            show:false,
            csList:[],
            imgUrl:Pictures.imgUrl
        }
    },
        computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
            };
            },
        
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        appear(){
            this.show=!this.show
        }
    },
    mounted(){
        var param={type:this.$route.query.type};
        axios.post("http://81.68.253.206:8081/page/getShopRoleList",
            param,
            {
                headers: {
                'token': localStorage.getItem("UserToken") }
            } 
        ).then(res=>{
            if(res.data&&res.data.data&&res.data.status){
                this.csList=res.data.data;
            }           
        })      
    }
    
}
</script>
<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .icon-more {
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/more.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}

.more{
    position: absolute;
    height: rem(300);
    width: rem(350);
    z-index: 999;
    top: 0;
    right: rem(20);
    background-color: #21202c;
    border-radius: rem(20);
    padding:0 rem(30);
    .bottom{
    border-top: 1px solid grey;
    }
    li{
        display: flex;
        width: 100%;
        height: rem(150);
        line-height:rem(150) ;
        font-size: rem(50);
        color: #fff;
        .msg{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../assets/imgs/xinfwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .home{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../assets/imgs/homewhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .collection{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../assets/imgs/scwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        span{
            margin-left: rem(30);
            flex: 1;
        }
    }
}
.more::after{
    content: '';
    display: block;
    width: rem(20);
    height: rem(20);
    position: absolute;
    right: rem(40);
    top: rem(-10);
    transform: rotate(45deg);
    opacity: .93;
    background-color: #21202c;
}
.role-container{
    margin-top: rem(145);

}
.role-offshelf{
    
    height: rem(260);
    background-color: #fff;
    padding: 0 rem(30);

}
.specific_detail {
        position: relative;
        width: 100%;
        height:rem(260);
        line-height: rem(60); 
        padding:rem(40) 0;          
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
        img {
            float: left;
            margin-right: rem(30);
            width: rem(175);
            height: rem(175);
            border-radius: rem(15);
            border-top: 1px solid #f1f1f1;
        }
        .info {
            float: left;
            width: 60%;
            height: rem(175);
            .row {
                width: 100%;
                height:rem(60);
                line-height: rem(60);
                .hj{
                    display: inline-block;
                    margin-bottom: rem(-10);
                    width: rem(50);
                    height: rem(50);
                    background: url(../../../assets/imgs/hai.png) no-repeat 50% 50%;
                    background-size: auto 100%;
                }
                .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                }
                .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                }
                .red {
                    color: #e74e4b;
                    font-size: rem(35);
                    border: 1px solid #e74e4b;
                    border-radius: 3px;
                    margin-right: rem(10);
                }
                .service {
                    position: absolute;
                    right: rem(50);
                    color: #888;
                    font-size: rem(35);
                }

                .platform {
                    position: absolute;
                    right: 0px;
                    margin-top: rem(5);
                }

                .apple {
                    display: inline-block;
                    width: rem(50);
                    height: rem(50);
                    background: url(../../../assets/imgs/apple.svg) no-repeat 50% 50%;
                    background-size: auto 100%;
                }
                .android{
                    display: inline-block;
                    width: rem(45);
                    height: rem(45);
                    background: url(../../../assets/imgs/android1.svg) no-repeat 50% 50%;
                    background-size: auto 100%;
                    }
                .price {
                    position: absolute;
                    right: 0px;
                    font-size: rem(50);
                    font-weight: 700;
                    color: #e74e4b;
                }

                .sc {
                    position: absolute;
                    right: 0px;
                    color: #888;
                    font-size: rem(35);
                }
            }
        }
    }
    




</style>